<template>
  <div class="index">
    <div class="footer"></div>
    <p>平均水平</p>
    <div class="rightTopEchart"></div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getAverage } from "@/api/echarts";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
const router = useRouter();

const leftSkillRef = ref([]); // 左边的技能分类
const rightProportionRef = ref([]); // 右边的占比
const sumProportionRef = ref([100, 100, 100, 100, 100]); // 技能占比总分

onMounted(() => {
  getData();
});
/**
 * 请求数据
 */
async function getData() {
  let res = await getAverage();
  if (res.code == 0) {
    const {
      data: { leftSkill, rightProportion },
    } = res;
    leftSkillRef.value = leftSkill;
    rightProportionRef.value = rightProportion;
    initEcharts();
  } else if (res.msg.includes("登录")) {
    router.replace("/");
  }
}
/**
 * 初始化图表
 */
function initEcharts() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector(".rightTopEchart"));
  // 配置颜色
  let lineColor = ["#9999FF", "#0066FF", "#33FFFF", "#33FF00", "#FF9900"];
  // 绘制图表
  myChart.setOption({
    tooltip: {
      //item和line搭配，将实现鼠标放置柱条上即可显示提示框，无阴影或者线条
      trigger: "item",
      axisPointer: {
        type: "line",
      },
    },
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        splitLine: {
          //坐标轴在grid区域的分割线
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        data: leftSkillRef.value,
        inverse: true, //数组翻转显示
        axisTick: {
          alignWithLabel: true,
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          fontWeight: "bold",
          color: "rgb(241, 241, 244)",
          fontSize: 16,
        },
      },
      {
        type: "category",
        data: rightProportionRef.value,
        inverse: true, //数组翻转显示
        axisTick: {
          alignWithLabel: true,
          show: false,
        },
        axisLine: {
          show: false, //不显示y轴的线
        },
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        yAxisIndex: 0,
        data: rightProportionRef.value,
        barWidth: "40%", //柱条的宽度
        label: {
          show: true,
          color: "rgb(0, 10, 66 )",
          fontSize: 14,
          formatter: function (params) {
            //柱条上的文字
            return params.data + "%";
          },
        },
        itemStyle: {
          borderRadius: 10, //圆角
          color: function (params) {
            return lineColor[params.dataIndex];
          },
        },
      },
      {
        type: "bar",
        yAxisIndex: 1, //使两个柱状图重合的效果
        barWidth: "50%",
        data: sumProportionRef.value,
        label: {
          show: false,
        },
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 4,
          borderRadius: 10, //圆角
        },
      },
    ],
  });
  // 图表跟随浏览器自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
</script>

<style lang="scss" scoped>
.index {
  // width: 100%;
  // height: 100%;
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .rightTopEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>
